<template>
  <div class="nav-bar">
    <!-- 在经典模式下屏幕尺寸小于1024px 将会出现导航栏图标打开折叠的NavTabs -->
    <div
      v-if="config.layout.shrink && config.layout.menuCollapse"
      class="unfold"
    >
      <!-- <Icon @click="onMenuCollapse" name="fa fa-indent" :color="config.getColorVal('menuActiveColor')"
                size="18" /> -->
      <Menu @click="onMenuCollapse" style="width: 1.3em; height: 1.3em" />
    </div>
    <NavTabs v-if="!config.layout.shrink" />
    <NavMenus />
  </div>
</template>
<script lang="ts" setup>
import NavTabs from "./tabs.vue"; // 顶部与左侧导航栏
import NavMenus from "../navMenu.vue"; // 顶部右侧导航栏+右侧aside用于切换布局
import { useConfig } from "@/store/config";
import { showShade } from "@/utils/pageShade";

const config = useConfig();

// 是否水平折叠收起菜单
const onMenuCollapse = () => {
  showShade("ba-aside-menu-shade", () => {
    config.setLayout("menuCollapse", true);
  });
  //打开aside折叠菜单
  config.setLayout("menuCollapse", false);
};
</script>
<style lang="scss" scoped>
//顶栏背景色
.nav-bar {
  display: flex;
  height: 50px;
  width: 100%;
  background-color: v-bind('config.getColorVal("headerBarBackground")');

  :deep(.nav-tabs) {
    display: flex;
    height: 100%;
    position: relative;

    .ba-nav-tab {
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 0 20px;
      cursor: pointer;
      z-index: 1;
      height: 100%;
      user-select: none;
      color: v-bind('config.getColorVal("headerBarTabColor")');
      transition: all 0.2s;
      -webkit-transition: all 0.2s;

      .close-icon {
        padding: 2px;
        margin: 2px 0 0 4px;
      }

      .close-icon:hover {
        background: var(--ba-color-primary-light);
        color: var(--el-border-color) !important;
        border-radius: 50%;
      }

      &.active {
        color: v-bind('config.getColorVal("headerBarTabActiveColor")');
      }

      &:hover {
        background-color: v-bind(
          'config.getColorVal("headerBarHoverBackground")'
        );
      }
    }

    .nav-tabs-active-box {
      position: absolute;
      height: 50px;
      background-color: v-bind(
        'config.getColorVal("headerBarTabActiveBackground")'
      );
      transition: all 0.2s;
      -webkit-transition: all 0.2s;
    }
  }
}

.unfold {
  align-self: center;
  padding-left: var(--ba-main-space);
}
</style>
